<!--
  ~ Copyright 2020 lcnap
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>登录页面</title>
    <link th:replace="~{fragments :: layui-css}"></link>

    <link href="favicon.ico" rel="shortcut icon">
</head>
<body>

<div class="layui-container">


    <div class="layui-row" style="margin-top: 15%">
        <div class="layui-col-md6 layui-col-md-offset3">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>登录</legend>
            </fieldset>
            <form class="layui-form " method="post" th:action="@{/login}">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户</label>
                    <div class="layui-input-block">
                        <input autocomplete="off" class="layui-input" lay-verify="required" name="username"
                               placeholder="请输入用户名" required type="text">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input autocomplete="off" class="layui-input" lay-verify="required" name="password"
                               placeholder="请输入密码" required type="password">
                    </div>
                </div>
                <!--

                                <div class="layui-form-item">
                                    <label class="layui-form-label">记住</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="switch" lay-skin="switch">
                                    </div>
                                </div>

                -->

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="login" lay-submit>登录</button>
                    </div>
                </div>
            </form>
        </div>

    </div>


</div>


<script th:replace="~{fragments :: layui}"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;


  //监听提交
  form.on('submit(login)', function(data){
    console.log(JSON.stringify(data.field));

    return true;
  });
});

</script>
</body>
</html>